<template>
  <div class="purple">
    <el-row>
      <el-col :span="4"></el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="head">
              <span>注册您的账号</span>
              <el-button type="primary" plain @click="toHome"
                >返回上层</el-button
              >
            </div>
          </template>
          <div class="re-box-card">
            <div class="content">
              <p>
                欢迎使用STW短期工作接单平台，我们旨在为您提供便捷安全的接单服务。为了保证订单信息的真实性和可靠性，我们需要对每一位用户进行实名认证，感谢您的理解，祝您使用愉快~
              </p>
            </div>
            <el-form :model="form" label-width="100px">
              <el-form-item label="用户名:">
                <el-input size="large" v-model="form.nick_name" />
              </el-form-item>
              <el-form-item label="手机号:">
                <el-col :span="16" style="margin-right: 20px">
                  <el-input size="large" v-model="form.phone" />
                </el-col>
                <el-col :span="3">
                  <el-button @click="get_code">获取验证码</el-button>
                </el-col>
              </el-form-item>
              <el-form-item label="请输入验证码:">
                <el-input size="large" v-model="form.code" />
              </el-form-item>
              <el-form-item label="密码:">
                <el-input size="large" type="password" v-model="password_1" />
              </el-form-item>

              <el-form-item label="请确认密码:">
                <el-input size="large" type="password" v-model="password_2" />
              </el-form-item>
            </el-form>

            <el-button
              type="primary"
              @click="check"
              style="width: 100px; margin: 10px"
              >注册</el-button
            >
          </div>
        </el-card>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </div>

  <el-dialog v-model="dialogFormVisible" title="请进行实名认证：">
    <div class="ddiv">
      <el-form :model="form">
        <el-form-item label="姓名：" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="身份证号：" :label-width="formLabelWidth">
          <el-input v-model="form.ID_card" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="check_user()"> 确认注册 </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      new: {},
      user_name: "",
      password_1: "",
      password_2: "",
      right_code: "",
      form: {
        name: "",
        ID_card: "",
        nick_name: "",
        phone: "",
        password: "",
        code: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "100px",
      user: {
        name: "尹子璇",
        idcard: "142622200303140028",
        res: "1",
        description: "一致",
        sex: "女",
        birthday: "20030314",
        address: "山西省临汾地区翼城县",
      },
      flag: false,
    };
  },
  methods: {
    // onNext() {
    //   console.log("next moreinfo");
    //   this.$router.push({
    //     path: "/MoreInfo",
    //   });
    // },
    get_code() {
      const regex = /^1[3456789]\d{9}$/;
      if (regex.test(this.form.phone)) {
        console.log("手机号合法");
        const params = new URLSearchParams();
        params.append("phone", this.form.phone);
        this.axios
          .post("http://127.0.0.1:8000/get_code/", params)
          .then((res) => {
            if (res.data.success) {
              this.right_code = res.data.code;
              console.log("正确验证码：", this.right_code);
            }
          })
          .catch((error) => {
            console.error(error); // 输出错误信息，以便调试
          });
      } else {
        console.log("手机号不合法");
        ElMessage.error("请输入正确的手机号！");
      }
    },
    check_password() {
      console.log(this.password_1);
      if (this.password_1 == this.password_2 && this.password_1 == "") {
        return 2;
      } else if (this.password_1 == this.password_2 && this.password_1 != "") {
        return 1;
      } else {
        return 0;
      }
    },
    check_code() {
      if (this.form.code == "") {
        //未输入验证码
        return 2;
      } else if (this.form.code == this.right_code && this.form.code != "") {
        //正确
        return 1;
      } else {
        //错误
        return 0;
      }
    },

    check() {
      // 用户名不能为空
      console.log(this.form.nick_name);
      if (this.form.nick_name == "") {
        console.log("用户名不能为空");
        ElMessage({
          message: "用户名不能为空！",
          type: "warning",
        });
        this.flag = false;
      }
      // 验证密码是否输入一致
      const check_password = this.check_password();
      if (check_password == 1) {
        console.log("两次输入密码相同且非零");
        this.form.password = this.password_1;
        this.flag = true;
      } else if (check_password == 2) {
        console.log("输入密码不能为空");
        ElMessage({
          message: "密码不能设置为空！",
          type: "warning",
        });
        this.flag = false;
      } else {
        console.log("两次输入密码不同");
        ElMessage.error("两次输入密码不同！");
        this.password_2 = "";
        this.flag = false;
      }
      // 验证手机验证码是否输入正确
      const check_code = this.check_code();
      if (check_code == 1) {
        console.log("验证码输入正确");
        this.form.password = this.password_1;
        this.flag = true;
      } else if (check_code == 2) {
        console.log("没输入验证码");
        ElMessage({
          message: "请输入验证码！",
          type: "warning",
        });
        this.flag = false;
      } else {
        console.log("验证码输入错误");
        ElMessage.error("验证码错误，请重新输入！");
        this.form.code = "";
        this.flag = false;
      }
      if (this.flag) {
        this.dialogFormVisible = true;
      }
    },
    get() {
      const params = new URLSearchParams();
      params.append("name", this.form.name);
      params.append("ID_card", this.form.ID_card);
      this.axios
        .post("http://127.0.0.1:8000/varification/", params)
        .then((res) => {
          if (res.data.success) {
            this.user = res.data.data;
            console.log(this.user);
          }
        })
        .catch((error) => {
          console.error(error); // 输出错误信息，以便调试
        });
    },
    check_user() {
      this.get();
      console.log(String(this.user.description));
      if (String(this.user.description == "一致")) {
        console.log("实名认证成功");
        //注册
        this.register();
      } else {
        console.log("实名认证失败");
        //弹窗
        ElMessage.error("认证失败，请输入正确的身份信息！");
        //重新输入
        this.form.name = "";
        this.form.ID_card = "";
      }
    },
    register() {
      const params = new URLSearchParams();
      params.append("name", this.form.name);
      params.append("ID_card", this.form.ID_card);
      params.append("nick_name", this.form.nick_name);
      params.append("phone", this.form.phone);
      params.append("password", this.form.password);
      params.append("gender", String(this.user.sex));
      params.append("birthday", String(this.user.birthday));

      this.axios.post("http://127.0.0.1:8000/register/", params).then((res) => {
        this.data = res.data.data;
        if (res.data.success) {
          window.alert(this.data);
          // 关窗口
          this.dialogFormVisible = false;
          // 跳转
          this.$router.push({
            path: "/",
          });
          // 弹窗
          ElMessage({
            message: "注册成功，快去登录吧！",
            type: "success",
          });
        } else {
          window.alert("注册失败");
        }
      });
    },
    toHome() {
      this.$router.push("/");
    },
  },
};
</script>
<style lang="scss" scoped>
.purple {
  background-color: #c1bbe7a3;
  height: 90vh;
}
.re-box-card {
  padding: 0 30px 10px 30px;
  display: flex;

  flex-direction: column;
  align-items: center;
}
.el-row {
  justify-content: center;
}
.el-col {
  border-radius: 4px;
}
.el-form-item {
  align-items: center;
}
.box-card {
  height: 80vh;
  margin-top: 5vh;
}
.ddiv {
  padding: 0 50px;
}
.btn {
  display: flex;
  justify-content: center;
}
.head {
  padding: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.head span {
  font-size: 18px;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 2px;
  font-weight: bolder;
}
.content {
  background-color: aliceblue;
  border-radius: 5px;
  margin: 20px;
}
.content p {
  text-indent: 2em;
  font-size: medium;
  font-family: STKaiti;
  font-weight: 550;
}
</style>
